<template>
<div class="app-container">
  <div class="filter-container">
    <el-form>
      <el-form-item>
        <el-button type="primary" icon="plus" v-if="hasPerm('department:add')" @click="showCreate">添加
        </el-button>
      </el-form-item>
    </el-form>
  </div>
  <el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row>
    <el-table-column align="center" label="序号" width="80px">
      <template slot-scope="scope">
          <span v-text="getIndex(scope.$index)"> </span>
        </template>
    </el-table-column>
    <el-table-column align="center" label="部门编码" prop="code" style="width: 60px;"></el-table-column>
    <el-table-column align="center" label="部门名称" prop="name" style="width: 80px;"></el-table-column>
    <el-table-column align="center" label="创建时间" :formatter="dateFormat" prop="createTime" width="170"></el-table-column>
    <el-table-column align="center" label="修改时间" :formatter="dateFormat" prop="updateTime" width="170"></el-table-column>
    <el-table-column align="center" label="管理" width="220" v-if="hasPerm('department:update')">
      <template slot-scope="scope">
          <el-button type="primary" icon="edit" @click="showUpdate(scope.$index)">修改</el-button>
          <el-button type="danger" icon="delete" v-if="scope.row.id!='318a11c2-3eef-11e8-a43b-00ff52d480ae'"
                     @click="removeDepartment(scope.$index)">删除
          </el-button>
        </template>
    </el-table-column>
  </el-table>
  <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.pageNum" :page-size="listQuery.pageRow" :total="totalCount" :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper">
  </el-pagination>
  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
    <el-form class="small-space" :model="tempDepartment" label-position="left" label-width="80px" style='width: 300px; margin-left:50px;'>
      <el-form-item label="部门编码" required v-if="dialogStatus=='create'">
        <el-input type="text" v-model="tempDepartment.code">
        </el-input>
      </el-form-item>
      <el-form-item label="部门名称" v-if="dialogStatus=='create'" required>
        <el-input type="text" v-model="tempDepartment.name">
        </el-input>
      </el-form-item>
      <el-form-item label="部门名称" v-else>
        <el-input type="text" v-model="tempDepartment.name" placeholder="不填则表示不修改">
        </el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button v-if="dialogStatus=='create'" type="success" @click="createDepartment">创 建</el-button>
      <el-button type="primary" v-else @click="updateDepartment">修 改</el-button>
    </div>
  </el-dialog>
</div>
</template>

<script>
import {
  mapGetters
} from 'vuex'
import {encryption} from "../../utils/aes"
import moment from 'moment/moment'

export default {
  data() {
    return {
      totalCount: 0, //分页组件--数据总条数
      list: [], //表格的数据
      listLoading: false, //数据加载等待动画
      listQuery: {
        pageNum: 1, //页码
        pageRow: 50, //每页条数
      },
      dialogStatus: 'create',
      dialogFormVisible: false,
      textMap: {
        update: '编辑',
        create: '新建部门'
      },
      tempDepartment: {
        id: '',
        code: '',
        name: '',
        createTime: '',
        updateTime: ''
      }
    }
  },
  created() {
    this.getList();
  },
  computed: {
    ...mapGetters([
      'userId'
    ])
  },
  methods: {
    //时间格式化
    dateFormat(row, column) {
      var date = row[column.property];
      if (date == undefined) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD HH:mm:ss");
    },
    getList() {
      //查询列表
      this.listLoading = true;
      this.api({
        url: "/department/list",
        method: "get",
        params: this.listQuery
      }).then(data => {
        this.listLoading = false;
        this.list = data.list;
        this.totalCount = data.totalCount;
      })
    },
    handleSizeChange(val) {
      //改变每页数量
      this.listQuery.pageRow = val
      this.handleFilter();
    },
    handleCurrentChange(val) {
      //改变页码
      this.listQuery.pageNum = val
      this.getList();
    },
    handleFilter() {
      //查询事件
      this.listQuery.pageNum = 1
      this.getList()
    },
    getIndex($index) {
      //表格序号
      return (this.listQuery.pageNum - 1) * this.listQuery.pageRow + $index + 1
    },
    showCreate() {
      //显示新增对话框
      this.tempDepartment.id = "";
      this.tempDepartment.code = "";
      this.tempDepartment.name = "";
      this.dialogStatus = "create"
      this.dialogFormVisible = true
    },
    showUpdate($index) {
      let department = this.list[$index];
      this.tempDepartment = department;
      this.tempDepartment.deleteStatus = '1';
      this.dialogStatus = "update"
      this.dialogFormVisible = true
    },
    createDepartment() {
      let poststr = encryption(this.tempDepartment);
      //添加新用户
      this.api({
        url: "/department/addDepartment",
        method: "post",
        data: poststr
      }).then(() => {
        this.getList();
        this.dialogFormVisible = false
      })
    },
    updateDepartment() {
      let poststr = encryption(this.tempDepartment);
      //修改用户信息
      let _vue = this;
      this.api({
        url: "/department/updateDepartment",
        method: "post",
        data: poststr
      }).then(() => {
        let msg = "修改成功";
        this.dialogFormVisible = false
        if (this.id === this.tempDepartment.id) {
          msg = '修改成功,部分信息重新登录后生效'
        }
        this.$message({
          message: msg,
          type: 'success',
          duration: 1 * 1000,
          onClose: () => {
            _vue.getList();
          }
        })
      })
    },
    removeDepartment($index) {
      let _vue = this;
      this.$confirm('确定删除此部门?', '提示', {
        confirmButtonText: '确定',
        showCancelButton: false,
        type: 'warning'
      }).then(() => {
        let department = _vue.list[$index];
        department.deleteStatus = '2';
        let poststr = encryption(department);
        _vue.api({
          url: "/department/updateDepartment",
          method: "post",
          data: poststr
        }).then(() => {
          _vue.getList()
        }).catch(() => {
          _vue.$message.error("删除失败")
        })
      })
    },
  }
}
</script>
